<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拓扑流程图管理</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            success: '#52C41A',
            warning: '#FAAD14',
            danger: '#FF4D4F',
            dark: '#1D2129',
            'gray-light': '#F2F3F5',
            'gray-medium': '#C9CDD4'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .tree-line {
        @apply border-l-2 border-gray-medium pl-4 ml-3;
      }
      .node-hover {
        @apply hover:bg-primary/5 transition-colors duration-200;
      }
      .btn-action {
        @apply p-1.5 rounded hover:bg-gray-light transition-colors duration-200;
      }
      .scale-in {
        animation: scaleIn 0.25s ease-out forwards;
      }
      @keyframes scaleIn {
        from { transform: scale(0.95); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
      }
    }
  </style>
</head>

<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-sm border-b border-gray-200">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <i class="fa fa-sitemap text-primary text-2xl"></i>
        <h1 class="text-xl font-semibold">拓扑流程图管理</h1>
      </div>
      
      <div class="flex items-center space-x-4">
        <div class="relative">
          <input type="text" placeholder="搜索网元..." 
                 class="pl-9 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64 transition-all duration-200">
          <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
        </div>
        
        <button id="addNetworkBtn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-all duration-200 shadow-sm hover:shadow">
          <i class="fa fa-plus"></i>
          <span>新增网元拓扑</span>
        </button>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-1 container mx-auto px-4 py-6">
    <!-- 左侧树形结构 - 现在占据整个宽度 -->
    <div class="w-full bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
      <div class="p-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
        <h2 class="font-medium">拓扑结构列表</h2>
        <div class="flex space-x-2">
          <button class="btn-action text-gray-600" title="刷新">
            <i class="fa fa-refresh"></i>
          </button>
          <button class="btn-action text-gray-600" title="展开全部">
            <i class="fa fa-plus-square-o"></i>
          </button>
          <button class="btn-action text-gray-600" title="折叠全部">
            <i class="fa fa-minus-square-o"></i>
          </button>
        </div>
      </div>
      
      <div class="p-4 max-h-[calc(100vh-240px)] overflow-y-auto" id="treeContainer">
        <!-- 网元拓扑 1 -->
        <div class="mb-2">
          <div class="flex items-center py-2 px-3 rounded-lg node-hover group">
            <div class="flex items-center mr-2">
              <i class="fa fa-server text-primary cursor-pointer toggle-icon" data-target="ne1-modules"></i>
            </div>
            <span class="flex-1 font-medium">网元拓扑 [NCP2]</span>
            <div class="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
              <button class="btn-action text-primary" title="编辑网元" onclick="editNetwork('NCP2', '核心网元2')">
                <i class="fa fa-pencil"></i>
              </button>
              <button class="btn-action text-green-600" title="新增模块" onclick="addModule('NCP2')">
                <i class="fa fa-cubes"></i>
              </button>
              <button class="btn-action text-danger" title="删除网元" onclick="deleteNetwork('NCP2')">
                <i class="fa fa-trash"></i>
              </button>
            </div>
          </div>
          
          <!-- 模块列表 -->
          <div id="ne1-modules" class="tree-line">
            <!-- 模块 1 -->
            <div class="mb-2 flex items-center py-2 px-3 rounded-lg node-hover group">
              <div class="flex items-center mr-2">
                <i class="fa fa-cube text-warning"></i>
              </div>
              <span class="flex-1">模块 [订单服务] <span class="text-sm text-gray-500">(升级顺序: 00001)</span></span>
              <div class="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                <button class="btn-action text-primary" title="编辑模块" onclick="editModule('NCP2', '订单服务', '00001')">
                  <i class="fa fa-pencil"></i>
                </button>
                <button class="btn-action text-danger" title="删除模块" onclick="deleteModule('NCP2', '订单服务', '00001')">
                  <i class="fa fa-trash"></i>
                </button>
              </div>
            </div>
            
            <!-- 模块 2 -->
            <div class="mb-2 flex items-center py-2 px-3 rounded-lg node-hover group">
              <div class="flex items-center mr-2">
                <i class="fa fa-cube text-warning"></i>
              </div>
              <span class="flex-1">模块 [支付服务] <span class="text-sm text-gray-500">(升级顺序: 00002)</span></span>
              <div class="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                <button class="btn-action text-primary" title="编辑模块" onclick="editModule('NCP2', '支付服务', '00002')">
                  <i class="fa fa-pencil"></i>
                </button>
                <button class="btn-action text-danger" title="删除模块" onclick="deleteModule('NCP2', '支付服务', '00002')">
                  <i class="fa fa-trash"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 网元拓扑 2 -->
        <div class="mb-2">
          <div class="flex items-center py-2 px-3 rounded-lg node-hover group">
            <div class="flex items-center mr-2">
              <i class="fa fa-server text-primary cursor-pointer toggle-icon" data-target="ne2-modules"></i>
            </div>
            <span class="flex-1 font-medium">网元拓扑 [NCP3]</span>
            <div class="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
              <button class="btn-action text-primary" title="编辑网元" onclick="editNetwork('NCP3', '核心网元3')">
                <i class="fa fa-pencil"></i>
              </button>
              <button class="btn-action text-green-600" title="新增模块" onclick="addModule('NCP3')">
                <i class="fa fa-cubes"></i>
              </button>
              <button class="btn-action text-danger" title="删除网元" onclick="deleteNetwork('NCP3')">
                <i class="fa fa-trash"></i>
              </button>
            </div>
          </div>
          
          <!-- 模块列表 -->
          <div id="ne2-modules" class="tree-line hidden">
            <!-- 模块 1 -->
            <div class="mb-2 flex items-center py-2 px-3 rounded-lg node-hover group">
              <div class="flex items-center mr-2">
                <i class="fa fa-cube text-warning"></i>
              </div>
              <span class="flex-1">模块 [用户服务] <span class="text-sm text-gray-500">(升级顺序: 00001)</span></span>
              <div class="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                <button class="btn-action text-primary" title="编辑模块" onclick="editModule('NCP3', '用户服务', '00001')">
                  <i class="fa fa-pencil"></i>
                </button>
                <button class="btn-action text-danger" title="删除模块" onclick="deleteModule('NCP3', '用户服务', '00001')">
                  <i class="fa fa-trash"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-gray-200 py-4">
    <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
      <p>© 2023 服务升级工具 | 拓扑流程图管理系统</p>
    </div>
  </footer>

  <!-- 模态框 - 新增/编辑网元拓扑 -->
  <div id="networkModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-md scale-in">
      <div class="p-5 border-b border-gray-200 flex justify-between items-center">
        <h3 class="text-lg font-semibold" id="networkModalTitle">新增网元拓扑</h3>
        <button class="text-gray-500 hover:text-gray-700" onclick="closeModal('networkModal')">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <div class="p-5">
        <form id="networkForm">
          <input type="hidden" id="networkId">
          
          <div class="mb-4">
            <label for="neId" class="block text-sm font-medium text-gray-700 mb-1">网元ID <span class="text-danger">*</span></label>
            <input type="text" id="neId" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="例如：NCP2">
          </div>
          
          <div class="mb-4">
            <label for="neName" class="block text-sm font-medium text-gray-700 mb-1">网元名称 <span class="text-danger">*</span></label>
            <input type="text" id="neName" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="例如：核心网元2">
          </div>
          
          <div class="mb-4">
            <label for="neDescription" class="block text-sm font-medium text-gray-700 mb-1">描述</label>
            <textarea id="neDescription" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请输入网元描述信息..."></textarea>
          </div>
        </form>
      </div>
      
      <div class="p-4 border-t border-gray-200 flex justify-end space-x-3">
        <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors duration-200" onclick="closeModal('networkModal')">取消</button>
        <button id="saveNetworkBtn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors duration-200">保存</button>
      </div>
    </div>
  </div>

  <!-- 模态框 - 新增/编辑模块 -->
  <div id="moduleModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-md scale-in">
      <div class="p-5 border-b border-gray-200 flex justify-between items-center">
        <h3 class="text-lg font-semibold" id="moduleModalTitle">新增模块</h3>
        <button class="text-gray-500 hover:text-gray-700" onclick="closeModal('moduleModal')">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <div class="p-5">
        <form id="moduleForm">
          <input type="hidden" id="moduleNetworkId">
          <input type="hidden" id="moduleOldName">
          <input type="hidden" id="moduleOldOrder">
          
          <div class="mb-4">
            <label for="moduleName" class="block text-sm font-medium text-gray-700 mb-1">模块名称 <span class="text-danger">*</span></label>
            <input type="text" id="moduleName" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="例如：订单服务">
          </div>
          
          <div class="mb-4">
            <label for="upgradeOrder" class="block text-sm font-medium text-gray-700 mb-1">升级顺序 <span class="text-danger">*</span></label>
            <input type="text" id="upgradeOrder" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="例如：00001">
            <p class="text-xs text-gray-500 mt-1">升级顺序决定了模块在打包和升级过程中的执行顺序</p>
          </div>
        </form>
      </div>
      
      <div class="p-4 border-t border-gray-200 flex justify-end space-x-3">
        <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors duration-200" onclick="closeModal('moduleModal')">取消</button>
        <button id="saveModuleBtn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors duration-200">保存</button>
      </div>
    </div>
  </div>

  <!-- 确认删除模态框 -->
  <div id="confirmDeleteModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-md scale-in">
      <div class="p-5 border-b border-gray-200">
        <h3 class="text-lg font-semibold">确认删除</h3>
      </div>
      
      <div class="p-5">
        <p class="text-gray-700 mb-4" id="deleteConfirmMessage">您确定要删除该项目吗？此操作不可撤销。</p>
        <input type="hidden" id="deleteType">
        <input type="hidden" id="deleteParams">
      </div>
      
      <div class="p-4 border-t border-gray-200 flex justify-end space-x-3">
        <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors duration-200" onclick="closeModal('confirmDeleteModal')">取消</button>
        <button id="confirmDeleteBtn" class="px-4 py-2 bg-danger text-white rounded-lg hover:bg-danger/90 transition-colors duration-200">确认删除</button>
      </div>
    </div>
  </div>

  <!-- 提示消息 -->
  <div id="toast" class="fixed top-4 right-4 px-4 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 flex items-center space-x-2 z-50"></div>

  <script>
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      // 初始化树形结构的展开/折叠功能
      initTreeToggle();
      
      // 绑定按钮事件
      bindButtonEvents();
    });
    
    // 初始化树形结构的展开/折叠功能
    function initTreeToggle() {
      const toggleIcons = document.querySelectorAll('.toggle-icon');
      toggleIcons.forEach(icon => {
        icon.addEventListener('click', function() {
          const targetId = this.getAttribute('data-target');
          const targetElement = document.getElementById(targetId);
          
          if (targetElement) {
            targetElement.classList.toggle('hidden');
            
            // 切换图标
            if (targetElement.classList.contains('hidden')) {
              this.classList.remove('fa-minus-circle');
              this.classList.add('fa-plus-circle');
            } else {
              this.classList.remove('fa-plus-circle');
              this.classList.add('fa-minus-circle');
            }
          }
        });
      });
    }
    
    // 绑定按钮事件
    function bindButtonEvents() {
      // 新增网元按钮
      document.getElementById('addNetworkBtn').addEventListener('click', function() {
        openAddNetworkModal();
      });
      
      // 保存网元按钮
      document.getElementById('saveNetworkBtn').addEventListener('click', function() {
        saveNetwork();
      });
      
      // 保存模块按钮
      document.getElementById('saveModuleBtn').addEventListener('click', function() {
        saveModule();
      });
      
      // 确认删除按钮
      document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
        confirmDelete();
      });
    }
    
    // 打开新增网元模态框
    function openAddNetworkModal() {
      document.getElementById('networkModalTitle').textContent = '新增网元拓扑';
      document.getElementById('networkForm').reset();
      document.getElementById('networkId').value = '';
      openModal('networkModal');
    }
    
    // 编辑网元
    function editNetwork(neId, neName) {
      document.getElementById('networkModalTitle').textContent = '编辑网元拓扑';
      document.getElementById('networkId').value = neId;
      document.getElementById('neId').value = neId;
      document.getElementById('neName').value = neName;
      // 这里可以根据实际数据填充描述信息
      openModal('networkModal');
    }
    
    // 新增模块
    function addModule(neId) {
      document.getElementById('moduleModalTitle').textContent = '新增模块';
      document.getElementById('moduleForm').reset();
      document.getElementById('moduleNetworkId').value = neId;
      document.getElementById('moduleOldName').value = '';
      document.getElementById('moduleOldOrder').value = '';
      openModal('moduleModal');
    }
    
    // 编辑模块
    function editModule(neId, moduleName, upgradeOrder) {
      document.getElementById('moduleModalTitle').textContent = '编辑模块';
      document.getElementById('moduleNetworkId').value = neId;
      document.getElementById('moduleOldName').value = moduleName;
      document.getElementById('moduleOldOrder').value = upgradeOrder;
      document.getElementById('moduleName').value = moduleName;
      document.getElementById('upgradeOrder').value = upgradeOrder;
      // 这里可以根据实际数据填充描述信息
      openModal('moduleModal');
    }
    
    // 删除网元
    function deleteNetwork(neId) {
      document.getElementById('deleteType').value = 'network';
      document.getElementById('deleteParams').value = neId;
      document.getElementById('deleteConfirmMessage').textContent = `您确定要删除网元拓扑 [${neId}] 吗？此操作将删除该网元下的所有模块，且不可撤销。`;
      openModal('confirmDeleteModal');
    }
    
    // 删除模块
    function deleteModule(neId, moduleName, upgradeOrder) {
      document.getElementById('deleteType').value = 'module';
      document.getElementById('deleteParams').value = JSON.stringify({neId, moduleName, upgradeOrder});
      document.getElementById('deleteConfirmMessage').textContent = `您确定要删除模块 [${moduleName}]（升级顺序: ${upgradeOrder}）吗？此操作不可撤销。`;
      openModal('confirmDeleteModal');
    }
    
    // 确认删除
    function confirmDelete() {
      const type = document.getElementById('deleteType').value;
      const params = document.getElementById('deleteParams').value;
      
      // 这里应该有实际的删除逻辑，调用API等
      console.log(`删除类型: ${type}, 参数: ${params}`);
      
      // 关闭模态框
      closeModal('confirmDeleteModal');
      
      // 显示成功消息
      showToast('删除成功', 'success');
      
      // 这里应该刷新树形结构
    }
    
    // 保存网元
    function saveNetwork() {
      const networkId = document.getElementById('networkId').value;
      const neId = document.getElementById('neId').value;
      const neName = document.getElementById('neName').value;
      const description = document.getElementById('neDescription').value;
      
      // 简单验证
      if (!neId || !neName) {
        showToast('请填写必填字段', 'error');
        return;
      }
      
      // 这里应该有实际的保存逻辑，调用API等
      console.log(`保存网元: ${networkId ? '编辑' : '新增'}, ID: ${neId}, 名称: ${neName}, 描述: ${description}`);
      
      // 关闭模态框
      closeModal('networkModal');
      
      // 显示成功消息
      showToast(networkId ? '网元更新成功' : '网元新增成功', 'success');
      
      // 这里应该刷新树形结构
    }
    
    // 保存模块
    function saveModule() {
      const neId = document.getElementById('moduleNetworkId').value;
      const oldName = document.getElementById('moduleOldName').value;
      const oldOrder = document.getElementById('moduleOldOrder').value;
      const moduleName = document.getElementById('moduleName').value;
      const upgradeOrder = document.getElementById('upgradeOrder').value;
      const description = document.getElementById('moduleDescription').value;
      
      // 简单验证
      if (!moduleName || !upgradeOrder) {
        showToast('请填写模块名称和升级顺序', 'error');
        return;
      }
      
      // 这里应该有实际的保存逻辑，调用API等
      console.log(`保存模块: ${oldName ? '编辑' : '新增'}, 网元: ${neId}, 模块名称: ${moduleName}, 升级顺序: ${upgradeOrder}, 描述: ${description}`);
      
      // 关闭模态框
      closeModal('moduleModal');
      
      // 显示成功消息
      showToast(oldName ? '模块更新成功' : '模块新增成功', 'success');
      
      // 这里应该刷新树形结构
    }
    
    // 打开模态框
    function openModal(modalId) {
      const modal = document.getElementById(modalId);
      if (modal) {
        modal.classList.remove('hidden');
        // 阻止背景滚动
        document.body.style.overflow = 'hidden';
      }
    }
    
    // 关闭模态框
    function closeModal(modalId) {
      const modal = document.getElementById(modalId);
      if (modal) {
        modal.classList.add('hidden');
        // 恢复背景滚动
        document.body.style.overflow = '';
      }
    }
    
    // 显示提示消息
    function showToast(message, type = 'info') {
      const toast = document.getElementById('toast');
      
      // 设置样式
      toast.className = 'fixed top-4 right-4 px-4 py-3 rounded-lg shadow-lg transform transition-transform duration-300 flex items-center space-x-2 z-50';
      
      if (type === 'success') {
        toast.classList.add('bg-success', 'text-white');
        toast.innerHTML = '<i class="fa fa-check-circle"></i><span>' + message + '</span>';
      } else if (type === 'error') {
        toast.classList.add('bg-danger', 'text-white');
        toast.innerHTML = '<i class="fa fa-times-circle"></i><span>' + message + '</span>';
      } else if (type === 'warning') {
        toast.classList.add('bg-warning', 'text-white');
        toast.innerHTML = '<i class="fa fa-exclamation-triangle"></i><span>' + message + '</span>';
      } else {
        toast.classList.add('bg-primary', 'text-white');
        toast.innerHTML = '<i class="fa fa-info-circle"></i><span>' + message + '</span>';
      }
      
      // 显示
      toast.classList.remove('translate-x-full');
      
      // 3秒后隐藏
      setTimeout(() => {
        toast.classList.add('translate-x-full');
      }, 3000);
    }
  </script>
</body>
</html>
